<template>
    <div class="Fast">
        <div class="Fast-list" @click="routerJump('withdrawManagement')">
            <div class="Fast-list-top">
                <svg-icon icon="ship" class="Fast-list-top-icon icon-ship" />
            </div>
            <div class="Fast-list-bottom">
                提现订单
            </div>
        </div>
        <div class="Fast-list" @click="routerJump('collectionManagement')">
            <div class="Fast-list-top">
                <svg-icon icon="refund" class="Fast-list-top-icon icon-refund" />
            </div>
            <div class="Fast-list-bottom">
                代收订单
            </div>
        </div>
        <div class="Fast-list" @click="routerJump('paymentManagement')">
            <div class="Fast-list-top">
                <svg-icon icon="shelves" class="Fast-list-top-icon icon-shelves" />
            </div>
            <div class="Fast-list-bottom">
                代付订单
            </div>
        </div>
        <div class="Fast-list" @click="routerJump('info')">
            <div class="Fast-list-top">
                <svg-icon icon="feedback" class="Fast-list-top-icon icon-feedback"  />
            </div>
            <div class="Fast-list-bottom">
                基本信息
            </div>
        </div>
        <div class="Fast-list" @click="routerJump('config')">
            <div class="Fast-list-top">
                <svg-icon icon="finance" class="Fast-list-top-icon icon-finance" />
            </div>
            <div class="Fast-list-bottom">
                应用配置
            </div>
        </div>
        <div class="Fast-list" @click="routerJump('createCollection')">
            <div class="Fast-list-top">
                <svg-icon icon="analysis" class="Fast-list-top-icon icon-analysis" />
            </div>
            <div class="Fast-list-bottom">
                创建收款
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"FastBox",
  methods: {
    routerJump(name){
        this.$router.push({name: name})
    }
  }
}
</script>
<style scoped>
.Fast{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.Fast-list{
    width: 33%;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    margin-bottom: 25px;
    border-radius: 5px;
}
.Fast-list:hover{
    background: rgba(22, 179, 253, 0.5);
    color: #ffffff;

}
.Fast-list:hover .Fast-list-top-icon{
    color: #ffffff !important;
}
.Fast-list:hover .Fast-list-bottom{
    color: #ffffff !important;
}
.Fast-list-top{
    width: 100%;
    display: flex;
    justify-content: center;
}
.Fast-list-top-icon{
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.Fast-list-bottom{
    font-size: 12px;
    color: #3F495E;
    text-align: center;
}
.icon-ship{
    color: #666666;
}
.icon-refund{
    color: #666666;
}
.icon-feedback{
    font-weight: bolder;
    color: #666666;
}
.icon-shelves{
    color: #666666;
}
.icon-finance{
   color: #666666;
}
.icon-analysis{
    color: #666666;
}
</style>
